<style src="@/css/components/table.css"></style>
<style src="@/css/components/popover.css"></style>
<style>
    /* @import '../../css/components/table.css';
    @import '../../css/components/popover.css'; */
    .question-bank-cont{
        padding: 30px;
        background: #fff;
    }

    .test-papers-header {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding-bottom: 20px;
    }

    .pages {
        margin-top:30px;
    }

    .search.el-input {
        width: 270px;
    }

    .el-icon-caret-top:before,.el-icon-caret-bottom:before {
        content: ""
    }
</style>
<!--题库列表-->
<template>
    <section class="question-bank-cont" v-if="show">
        <div class="test-papers-header">
            <el-button type="primary" class="showdow" @click="doAddPaperTopic" >创建试题</el-button>
            <el-input
                placeholder="请输入试卷名称"
                suffix-icon="el-icon-search"
                class="search"
                v-model="searchText">
            </el-input>
        </div>

        <section>
            <el-table :data="quesTopicList" style="width: 100%" class="newTab first-table" @sort-change="rankFn">
                <el-table-column  label="试卷名称" min-width="35%">
                    <template slot-scope="scope">
                        <el-popover
                            popper-class="popover"
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            :content="scope.row.QuestionTitle">
                            <span slot="reference">{{scope.row.QuestionTitle.substr(0,10)}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="类型" min-width="15%" sortable prop="questionTypeOrder">
                    <template slot-scope="scope">
                        {{scope.row.QuestionType | filterType}}
                    </template>
                </el-table-column>
                <el-table-column prop="QuoteNum" label="使用数" min-width="15%"></el-table-column>
                <el-table-column prop="CreateTime" label="创建时间" sortable min-width="15%"></el-table-column>
                <el-table-column label="操作" min-width="20%">
                    <template slot-scope="scope">
                        <span class="operate" @click="deleteFn(scope.row.QID)">删除</span>
                        <span class="mr20 operate" @click="doEditTopic(scope.row.QID)" v-if="scope.row.Editable == 1">编辑</span>

                    </template>
                </el-table-column>
            </el-table>
        </section>


        <!-- 分页区 -->
        <pageModel class="pages newPage" :total="total" :page="page" @changePageSize="getPageSize" @changePage="getPage"></pageModel>


        <!-- 弹窗区 -->
        <el-dialog
            title="提示"
            :visible.sync="deleteState"
            class="new-dialog"
            width="480px"
            :before-close="handleClose">
            <div class="cont">确定删除该试卷？</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="text no-border" @click="deleteState = false">取消</el-button>
                <el-button type="primary"  class="add" @click="deleteConfig">确 定</el-button>
            </span>
        </el-dialog>
    </section>

    <div class="question-bank-cont no-temporarily" v-else>
        <img src="../../images/ic-default.png" alt="">
        <p>即将上线，敬请期待</p>
    </div>
</template>

<script>

	import qs from 'qs'
    import pageModel from "components/pageModel.vue"

	Vue.filter('filterType', n=>{
		var arr = ['', '多选题', '单选题', '问答题'];
		return arr[n];
    });


	export default{
		data: function(){
			return {
                show:false,
                tab:[
                    {
                        name: '试卷题库',
                        type: '0'
                    },
                    {
                        name: '问卷题库',
                        type: '1'
                    }
                ],

                path:[
                    {
                        name:'效果评估',
                        path:'/effect/test-papers'
                    },
                    {
                        name:'题目库'
                    }
                ],
                id:'',
                deleteState:false,
                total:0,
                pagesize:10,
                page:1,
                searchText:'',
				quesTopicList: [],  //  试卷题库列表
                questionTypeOrder:'',
                createOrder:''

			}
		},
		mixins: [mixinMethods],
		methods: {
			// 当前显示条数发生改变
            getPageSize(value) {
                this.pagesize = value
                this.initTable()
            },

            // 当前分页改变
            getPage(value) {
                this.page = value
                this.initTable()
            },

            rankFn(value) {
                let name = value.prop.toLocaleLowerCase()
                let val = value.order == 'ascending' ? 'asc' : 'desc'
                if( name == 'createtime') {
                    this.createOrder = val
                } else {
                    this.questionTypeOrder = val
                }

                this.initTable()
            },

            initTable() {
                axios.post('/com/exam/getLibQuestionList', qs.stringify({
                    keywords:this.searchText,
                    page: this.page,
                    pagesize: this.pagesize || 10,
                    questionTypeOrder: this.questionTypeOrder,
                    createOrder: this.createOrder
                })).then((res) => {
                    var d = res.data

                    if(d.flag == 1) {
                      this.quesTopicList = d.data.Rows
                      this.total = d.data.Total
                    } else {
                      this.$message.error(d.msg);
                    }
                })
            },

            deleteFn(id) {
                this.id = id
                this.deleteState = true
            },

            deleteConfig() {
                axios.post('/com/exam/delLibQuestion', qs.stringify({
                    QID:this.id
                })).then((res) => {
                    var d = res.data
                    if(d.flag == 1) {
                        this.page =  1
                        this.initTable()
                        this.deleteState = false
                    } else {
                        this.$message.error(d.msg)
                    }
                })
            },

            doAddPaperTopic() {
                this.$router.push('/effect/add-topic')
            },

            doEditTopic(QID) {
                this.$router.push({ path: '/effect/add-topic', query:{'QID': QID}})
            }
		},
		mounted: function(){
			this.initTable();
            this.show &&  this.$store.commit('setTab', this.tab)
            // 设置tab切换

            this.$store.commit('setPath', this.path)

            // 设置面包屑
            this.$store.commit('setTabCur', '0')

		},

        components:{
            pageModel
        },

        watch:{
            creentTab(i){
                if( i == 1 )  {
                   this.$router.push('/effect/qsn-bank')
                } else {
                    this.page = 1
                    this.initTable()
                }
            },

            searchText() {
                this.initTable()
            }
        },

        computed: {
            creentTab(){
                return this.$store.state.creentTab
            }
		}
	}


</script>
